<template>
  <div id="page-container">
    <el-button @click="exportWord">导出 word</el-button>
    <el-button @click="printDetail">打印或者导出pdf</el-button>
    <div id="page-content">
      <h1 style="text-align: center">xxxx申请表</h1>
      <div style="color: red; height: 50px">
        <span> 申请人 _______________ </span>
        <span> 日期 _______________ </span>
      </div>
      <div
        style="
          height: 300px;
          overflow: auto;
          border: 1px solid #000;
          margin-top: 20px;
        "
      >
        <table border="1" style="width: 100%">
          <thead>
            <tr>
              <th>Month</th>
              <th>Savings</th>
            </tr>
          </thead>
          <tfoot>
            <tr>
              <td>Sum</td>
              <td>$180</td>
            </tr>
          </tfoot>
          <tbody>
            <tr>
              <td>January</td>
              <td>$100</td>
            </tr>
            <tr>
              <td>February</td>
              <td>$80</td>
            </tr>
            <tr>
              <td>January</td>
              <td>$100</td>
            </tr>
            <tr>
              <td>February</td>
              <td>$80</td>
            </tr>
            <tr>
              <td>January</td>
              <td>$100</td>
            </tr>
            <tr>
              <td>February</td>
              <td>$80</td>
            </tr>
            <tr>
              <td>January</td>
              <td>$100</td>
            </tr>
            <tr>
              <td>February</td>
              <td>$80</td>
            </tr>
            <tr>
              <td>January</td>
              <td>$100</td>
            </tr>
            <tr>
              <td>February</td>
              <td>$80</td>
            </tr>
            <tr>
              <td>January</td>
              <td>$100</td>
            </tr>
            <tr>
              <td>February</td>
              <td>$80</td>
            </tr>
            <tr>
              <td>January</td>
              <td>$100</td>
            </tr>
            <tr>
              <td>February</td>
              <td>$80</td>
            </tr>
            <tr>
              <td>January</td>
              <td>$100</td>
            </tr>
            <tr>
              <td>February</td>
              <td>$80</td>
            </tr>
            <tr>
              <td>January</td>
              <td>$100</td>
            </tr>
            <tr>
              <td>February</td>
              <td>$80</td>
            </tr>
            <tr>
              <td>January</td>
              <td>$100</td>
            </tr>
            <tr>
              <td>February</td>
              <td>$80</td>
            </tr>
            <tr>
              <td>January</td>
              <td>$100</td>
            </tr>
            <tr>
              <td>February</td>
              <td>$80</td>
            </tr>
          </tbody>
        </table>
      </div>
      <img
        class="export-img"
        src="https://ms.bdimg.com/pacific/0/pic/433651267_1709113759.jpg?x=0&y=0&h=200&w=300&vh=200.00&vw=300.00&oh=200.00&ow=300.00"
      />
      <img
        class="export-img"
        src="https://ms.bdimg.com/pacific/0/pic/433651267_1709113759.jpg?x=0&y=0&h=200&w=300&vh=200.00&vw=300.00&oh=200.00&ow=300.00"
      />
    </div>
  </div>
</template>

<script>
import exportWord from "./lib/jquery.wordexport.js";
 import print from 'print-js'
export default {
  data() {
    return {};
  },
  methods: {
    /**
     * 导出样式word 注意事项
     *  1. 不可用 flex、position、部分高度也不可用
     *  2. 该方法对 原生 table 的 布局方式支持度更大
     *  3. 支持 行内样式，也支持 syle 传入 字符串类型的 css
     *  4. 无法上传 input:file 文件类型
     *  5. 可识别 静态img，额外处理了 url类型的img，但是需要给 标签加上 特殊类名称 ，使用时传入 urlImgClassName
     */
    exportWord() {
      const params = {
        DomId: "#page-content", // 目标盒子内容转化为word ， 为id 需要写 #  ，
        fileName: "测试文件", // 输出的文件名称
        // style: `h1 {color:yellow} .title {font-size: 18px;color: red;}`, // 外联样式
        style: "", // 也可写行内样式
        urlImgClassName: ".export-img", // url img 需要新增的特殊类名称
      };
      exportWord(params); // 可能会出现 未知错误， 这里的封装未支持异步处理
      this.$message.success("导出成功");
    },
    printDetail() {
      printJS({
        printable: "page-content", //打印区域
        type: "html", //打印类型html，还可以是json，image等，详细写法见官网
        targetStyles: ["*"], //css样式，写成*代表打印样式完全继承你页面的样式
        maxWidth: "800px", //打印界面最大宽度，适当调整可以解决打印页面过宽，显示不完整的问题
      });
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.title {
  font-size: 18px;
  color: red;
}

#page-container{
  width: 800px;
}
</style>
